<template>
      <div v-if="bannerData">
            <div class="swiper-container banner">
                <div class="swiper-wrapper" style="height:140px;width:100%;" v-if="bannerData.status==='O'">
                    <a :href="item.url" class="swiper-slide" v-for="(item,index) in bannerData.comptItems" :key="index" v-if="item.status==='O'">
                            <div  class="img bg-img"  :style="{
                                        backgroundImage:'url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522087972833&di=38071e0ac1e3792766257636a94e3780&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F3801213fb80e7beca9004ec5252eb9389b506b38.jpg)'
                                    }">
                            </div>
                    </a>                                                                         
                </div>
            </div>     
      </div>
</template>

<script>
    import Swiper from 'swiper';
    import '@/assets/css/swiper.min.css';
    import indexApi from '@/api/index/nav'
    export default {
        name:'bannernot',
        data(){
            return {
                bannerData:null
            }
        },
        created(){
            this.getBanner();
        },
        methods:{
            getBanner(){ //获取首页banner
                indexApi.getBanner().then(response=>{
                    this.bannerData = response;
                    
                })

            },
        },
        mounted() {
            var swiper = new Swiper('.swiper-container', {
                loop: true,
                autoplay: true,
                speed:2000,
                effect : 'fade'
            });
    },
}
</script>

<style scoped>
.banner .swiper-slide{
    display: block;
    width: 100%;
    height: 100%;
    }
    .banner .img{
        height:100%;
         background-repeat:no-repeat;
        background-size: cover; 
        background-position:center center;
    }
</style>